<template>
	<view class="content" style="background: #f8f8f8;">
		<div class="top">
			<div class="biu">
				<div class="t1">
					<img class="touxiang" src="../../static/logo.png" alt="" />
					<span class="mobile">{{phoneval}}</span>
					<span class="info" @click="geren()">个人信息 ></span>
				</div>
				<div class="t2">
					<img class="biao1" src="../../static/logo.png" alt="" />
					今日阅读
					<span class="spp">29</span>
					分钟
				</div>
				<div class="t3">
					<div>
						<p>2.5W</p>
						<p>动态</p>
					</div>
					<div>
						<p>14</p>
						<p>关注</p>
					</div>
					<div>
						<p>32W</p>
						<p>粉丝</p>
					</div>
					<div>
						<p>6W</p>
						<p>被赞</p>
					</div>
				</div>

				<div class="t4">
					<div>
						<p class="icons"><van-icon name="bell" /></p>
						<p>消息通知</p>
					</div>
					<div>
						<p class="icons"><van-icon name="like-o" /></p>
						<p>收藏</p>
					</div>
					<div>
						<p class="icons"><van-icon name="underway-o" /></p>
						<p>浏览历史</p>
					</div>
					<div>
						<p class="icons"><van-icon name="smile" /></p>
						<p>我的作品</p>
					</div>
				</div>
			</div>
		</div>
		<div class="nini">
			<p class="fuwu">更多服务</p>
			<div class="more">
				<div class="dats">
					<p class="icons"><van-icon name="question-o" /></p>
					<p>用户反馈</p>
				</div>
				<div class="dats">
					<p class="icons"><van-icon name="service-o" color="orange" /></p>
					<p>小智同学</p>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import { ref } from 'vue';
export default {
	onShow: function() {
		let phone = uni.getStorageSync("phone")
		console.log(phone.length,'length');
		if(phone.length!==0){
			
		}else{
			uni.redirectTo({
				//关闭当前页面，跳转到应用内的某个页面。
				url: '/pages/login/login'
			});
		}
	},
	setup() {
		const username = ref('zhangsan');
		const phoneval = ref(uni.getStorageSync("phone"))
		const geren = () => {
			// uni.navigateTo({
			//             //保留当前页面，跳转到应用内的某个页面
			//             url: '/pages/video/video'
			//         })
			uni.redirectTo({
				//关闭当前页面，跳转到应用内的某个页面。
				url: '/pages/login/login'
			});
		};

		return {
			username,
			geren,
			phoneval,
		};
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	background-color: #f8f8f8;
}
.top {
	width: 100%;
	height: 250px;

	background: linear-gradient(to bottom right, rgb(73, 70, 117), rgb(172, 175, 213));
	// border-radius: 0 0 100px 100px;
	border-bottom-left-radius: 133.33333vw 32vw;
	border-bottom-right-radius: 133.33333vw 32vw;
	// border-bottom-left-radius: 20px;
	// border-bottom-right-radius: 20px;
	overflow: hidden;
	.biu {
		width: 90%;
		margin: 0 auto;

		.t1 {
			height: 60px;
			margin-top: 30px;
			// background-color: pink;
			position: relative;
			color: white;
			// width: ;
			.touxiang {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				border: 1px solid white;
				position: absolute;
			}
			.mobile {
				font-size: 24px;
				line-height: 60px;
				margin-left: 60px;
			}
			.info {
				position: absolute;
				line-height: 60px;
				right: 0;
				font-size: 12px;
			}
		}

		.t2 {
			margin-top: 10px;
			color: white;
			background: linear-gradient(to bottom right, rgb(48, 46, 110), rgb(83, 75, 133));
			width: 45%;
			border-radius: 10px;
			font-size: 11px;
			.biao1 {
				width: 15px;
				height: 15px;
				border-radius: 50%;
				margin: 3px 0 0 2px;
			}
			.spp {
				color: orange;
				font-weight: 800;
				font-size: 16px;
			}
		}

		.t3 {
			// background-color: pink;
			width: 85%;
			margin: 15px auto;
			display: flex;
			color: white;
			justify-content: space-between;
			text-align: center;
			font-size: 11px;
		}

		.content {
			position: relative;
		}
		.t4 {
			background-color: #fff;
			height: 67px;
			// border: 1px solid #fff;
			// display: none;
			top: 30;
			position: absolute;
			width: 90%;
			margin: 0 auto;
			border-radius: 10px;
			display: flex;
			justify-content: space-around;
			text-align: center;
			align-items: center;
			color: #333;
			font-size: 11px;
			font-weight: 400;
			.icons {
				font-size: 20px;
				margin-bottom: 6px;
			}
		}
	}
}
.nini {
	background-color: white;
	width: 90%;
	margin: 20px auto;
	height: 130px;
	border-radius: 10px;
	overflow: hidden;
	.fuwu {
		margin: 10px 0 15px 20px;
		font-size: 18px;
		font-weight: 600;
	}

	.more {
		display: flex;
		.dats {
			margin: 0 10px;

			.icons {
				text-align: center;
				margin-bottom: 10px;
			}
		}
	}
}
</style>
